<template>
  <div class="yl-clearfix">
    <div class="searchgrid">
      <input value="返回上一层" type="button" class="yl-input-button yl-float-left" @click="$router.go(-1)">
    </div>
    <el-table :data="agentList"
              highlight-current-row
              v-loading="listLoading"
              style="width: 100%;">
      <el-table-column label="#" prop="id"></el-table-column>
      <el-table-column label="代理商编号" prop="agent_number"></el-table-column>
      <el-table-column label="名称" prop="agent_name"></el-table-column>

      <el-table-column label="域名">
        <template scope="scope">
          <span v-text="scope.row.info ? scope.row.info.web_domain : ''"></span>
        </template>
      </el-table-column>

      <el-table-column label="上级代理商">
        <template scope="scope">
          <span v-if="scope.row.parent">{{scope.row.parent.agent_name}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="owner_name" label="联系人">
      </el-table-column>
      <el-table-column prop="phone" label="联系电话">
      </el-table-column>

      <el-table-column label="天配" width="45">
        <template scope="scope">
          <span v-text="calculatePercentage(scope.row,0)"></span>
        </template>
      </el-table-column>

      <el-table-column label="月配" width="45">
        <template scope="scope">
          <span v-text="calculatePercentage(scope.row,1)"></span>
        </template>
      </el-table-column>

      <el-table-column label="服务费" width="45">
        <template scope="scope">
          <span v-text="calculatePercentage(scope.row,2)"></span>
        </template>
      </el-table-column>


      <el-table-column prop="agent_level" label="代理值" width="46">
      </el-table-column>

      <el-table-column label="状态" width="46">
        <template scope="scope">
          <span v-text="scope.row.is_locked ? '禁用' : '正常'"></span>
        </template>
      </el-table-column>


      <el-table-column prop="created_time" label="添加时间">
      </el-table-column>

      <el-table-column label="操作" min-width="120">
        <template scope="scope">
          <router-link class="el-button el-button--default el-button--mini"
                       type="button"
                       :to="{name:'下级代理列表',query:{agent_id:scope.row.id}}">
            <i class="fa fa-sitemap" title="下级代理商"></i>
          </router-link>
          <!--<router-link class="el-button el-button&#45;&#45;default el-button&#45;&#45;mini"-->
          <!--type="button"-->
          <!--v-if="scope.row.parent"-->
          <!--:to="{name:'下级代理列表',query:{agent_id:scope.row.parent.id}}">-->
          <!--<i class="fa fa-university" title="上级代理商"></i>-->
          <!--</router-link>-->

          <!--<el-button size="mini" @click="handleEmployeeList(scope.row)" title="员工管理"><i class="fa fa-user"></i></el-button>-->
          <el-button size="mini"
                     @click="handleEditAgent(scope.row)"
                     v-if="scope.row.parent_id != userInfo.agent.id || isUserSystemAdmin"
                     title="代理修改"><i class="fa fa-pencil"></i></el-button>
          <el-button size="mini" @click="handleAddChildAgent(scope.row)" title="添加下级代理"><i class="fa fa-plus-square"></i></el-button>
          <el-button size="mini" @click="handlePlayAgent(scope.row)" title="扮演代理"><i class="fa fa-play-circle"></i></el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>

</template>

<script>
  import {getAgentChildrenList} from '../../api/agent';
  import {rolePlayIssueToken} from '../../api/user';
  import {TOKEN_OBJ_ID} from '../../common/tools';

  export default {
    data() {
      return {
        playLoginUrl: '',
        agentList: [],
        listLoading: false,
      };
    },
    methods: {
      pageIndexChange(clickPageIndex) {
        //分页页面发生改变
        this.filters.page = clickPageIndex;
        this.getAgentFamilyList();
      },
      //获取用户列表
      getAgentFamilyList() {
        let agent_id = this.$route.query.agent_id;
        //不带参数就显示自己的代理商和下级
        this.listLoading = true;
        getAgentChildrenList({agent_id}).then(res => {
          this.agentList = res.data;
          this.listLoading = false;
        }).catch(error => this.ezNotifyAxiosCatch(error));
      },
      handleSizeChange(size) {
        this.filters.size = size;
        this.filters.page = 1;
        this.getAgentFamilyList();
      },
      handleAddChildAgent: function(row) {

        let query = {parentId: row.id};
        this.$router.push({path: '/agent/create', query});
      },
      handleEmployeeList: function(row) {
        this.$router.push({name: '员工列表', query: {agent_id: row.id}});
      },
      handleEditAgent: function(row) {
        let id = row.id;
        this.$router.push({name: '代理商修改', params: {id}});
      },
      //角色扮演
      handlePlayAgent: function(row) {
        rolePlayIssueToken({agent_id: row.id}).then(res => {
          if (res.status == 1) {
            this.playLoginUrl = 'http://agent-gubao.591wmj.com/login?access_token=' + res.data.accessToken;
          } else {
            this.ezNotifyAxiosThen(res);
          }
        });
      },
      calculatePercentage(row, type) {
        let percentage = '';
        if (!row.percentages) {
          return percentage;
        }
        row.percentages.forEach(value => {
          if (value.type == type) {
            percentage = value.percentage;
          }
        });
        return percentage;
      },
    },
    mounted() {
      this.getAgentFamilyList();
    },
    watch: {
      '$route': function(newRoute, oldRoute) {
        this.getAgentFamilyList();
      },
      'playLoginUrl': function(newRoute, oldRoute) {
        window.open(
          newRoute,
          '_blank',
        );
      },
    },
  };
</script>

